<template>
  <div class="m-10">
    <div class="mt-5" style="width: 300px; height: 6px">
      <ProgressBar :time="1" v-model="percentageValue"></ProgressBar>
    </div>
    <div class="mt-5" style="width: 300px; height: 6px">
      <ProgressBar
        v-model="percentageValue"
        :color="customColors"
      ></ProgressBar>
    </div>
    <div class="mt-5" style="width: 300px; height: 20px">
      <ProgressBar
        :textinside="true"
        :time="1"
        v-model="percentageValue"
      ></ProgressBar>
    </div>

    <Button @click="() => (percentageValue += 10)" class="mt-2">go</Button>
    <Button @click="() => (percentageValue -= 10)" class="mt-2">back</Button>
  </div>
</template>

<script setup lang="ts">
import ProgressBar from "@/components/common/progressBar/index.vue";
import Button from "@/components/Button.vue";

const percentageValue = ref(0);
const customColors = [
  { color: "#f56c6c", percentage: 20 },
  { color: "#e6a23c", percentage: 40 },
  { color: "#5cb87a", percentage: 60 },
  { color: "#1989fa", percentage: 80 },
  { color: "#6f7ad3", percentage: 100 },
];
</script>
